<template>
    <div class="main_wrapper" :data-theme="theme">
        <div class="left_photo_wrapper">
            <!--动画-->
            <div id="container"></div>
        </div>
        <div class="right_login_wrapper">
            <div class="right_login_content">
                <template v-if="status===true">
                    <p>欢迎回来</p>
                    <input placeholder="用户名" v-model="loginForm.username"/>
                    <input placeholder="密码" v-model="loginForm.password"/>
                </template>
                <template v-else>
                    <p>欢迎回来</p>
                    <input placeholder="用户名" v-model="SignInForm.username"/>
                    <input placeholder="姓名" v-model="SignInForm.name"/>
                    <input placeholder="密码" v-model="SignInForm.password"/>
                </template>
                <div class="button_wrapper">
                    <el-button type="primary"  size="large" @click="LoginorRegistr">{{status===true?'开始使用':'注册'}}</el-button>
                </div>
                <a @click="statuschange">{{status===true?'如果没有账号，请注册账号？':'发现已有账号！'}}</a>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {login} from '@/api/login'
import {register} from '@/api/register';
import animateData from '@/lottie.json'
import lottie from 'lottie-web';
import {onMounted, reactive, ref} from 'vue'
import type { Ref } from 'vue'
import {useRouter} from 'vue-router';
import { ElMessage } from 'element-plus'

let router = useRouter()



// 主题
let theme: Ref<string>  = ref('default')
// lottie动画
let animation:Ref = ref(null);
//挂载生命周期
onMounted(() => {
    // 这里需要注意:因为使用ts,所以在"container"这个字段的时候它会报错,所以下边需要加一个判断,保证不能为null=>if (element).
    const element: HTMLElement | null = document.getElementById('container');
    if (element) {
        // 初始化动画
        animation.value = lottie.loadAnimation({
            container: element,
            renderer: 'svg',
            loop: false,
            autoplay: true,
            animationData:  animateData,
        });
    }
})
//切换登入注册
let status:Ref<boolean> = ref(true)
function statuschange():void{
    status.value = !status.value
}
//登录
interface loginForm {
    username: string
    password: string
}
const loginForm: loginForm = reactive({
    username: '',
    password: ''
})
//注册
interface SignInForm {
    username: string
    name?:string
    password: string
}
const SignInForm: SignInForm = reactive({
    username: '',
    name:'',
    password: ''
})
//登录与注册
const LoginorRegistr = async () => {
    if(status.value===true){
        try{
            const data:any = await login(loginForm)
            if(data.token!==undefined){
                localStorage.setItem('token',data.token)
                await router.push('/')
            }
        }catch (err){
            console.log('failure',err)
        }
    }else{
        try{
            const data:any = await register(SignInForm)
            if(data.error){
                ElMessage({
                    message: data.error,
                    type: 'warning',
                })
            }else{
                ElMessage({
                    message: data.success,
                    type: 'success',
                })
            }
        }catch (err:any){
            ElMessage({
                message: '注册失败',
                type: 'warning',
            })
            console.log('failure',err)
        }
    }
}


</script>

<style scoped lang="scss">
@import '../style/theme.scss';
//必须放在外面
.main_wrapper{
    width: 100%;
    height: 100%;
    display: flex;
}
.left_photo_wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1.5;
    font-size: 50px;
    font-weight: bolder;
    color: #000000;
    font-family: "JetBrains Mono ExtraBold",ui-serif;
    @include theme{
        background-color: t('bg_color');
    }
}
.right_login_wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex:1;
    .right_login_content{
        display: flex;
        flex-direction: column;
        & > *{
            margin: 10px;
        }
        input{
            font-size:14px;
            font-weight: 600;
            padding-left:10px;
        }
        p{
            width: 320px;
            margin: 10px;
            font-size: 16px;
            font-weight: bolder;
            color: #000000;
            font-family: "JetBrains Mono ExtraBold",ui-serif;
            text-align: start;
        }
        .button_wrapper{
            .el-button{
                width: 326px;
            }
        }
    }
}
.test{
}
</style>
